<template>
  <div class="home page">
    <div class="title bg-full animate__animated animate__fadeInDown"></div>
    <div class="sub-title bg-full animate__animated animate__fadeInUp"></div>
    <div class="links">
      <div class="row">
        <div
          class="item bg-full calendar animate__animated animate__zoomIn"
          @click="goPage('calendar')"
        ></div>
        <div
          class="item bg-full apply animate__animated animate__zoomIn"
          @click="goPage('apply')"
        ></div>
        <div
          class="item bg-full race animate__animated animate__zoomIn"
          @click="goPage('race')"
        ></div>
      </div>
      <div class="row">
        <div
          class="item bg-full show animate__animated animate__zoomIn"
          @click="goPage('show')"
        ></div>
        <div
          class="item bg-full stats animate__animated animate__zoomIn"
          @click="goPage('stats')"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useGlobalStore } from '@/stores/global.js'
import { toast } from 'vue3-toastify'

const router = useRouter()

const globalStore = useGlobalStore()

const goPage = (name) => {
  if (name === 'race') {
    if (!globalStore.user.id) {
      toast('请先报名', {
        onClose: () => {
          router.push({ name: 'apply' })
        }
      })
      return
    }
    if (!globalStore.user.personalUrl) {
      toast('请先上传个人形象照', {
        onClose: () => {
          router.push({ name: 'apply' })
        }
      })
      return
    }
  }
  if (name === 'apply' && globalStore.user.id && globalStore.user.personalUrl) {
    toast('你已经报过名了')
    return
  }
  router.push({ name })
}
</script>

<style lang="less" scoped>
.title {
  width: 787px;
  height: 982px;
  background-image: url(../assets/img/home/title.png);
}

.sub-title {
  width: 965px;
  height: 137px;
  background-image: url(../assets/img/sub-title.png);
}

.links {
  margin-top: 100px;
  .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 100px;
    margin-top: 20px;
  }

  .item {
    width: 240px;
    height: 240px;
    background-size: 100% 100%;
  }

  .calendar {
    background-image: url(../assets/img/home/calendar.png);
  }

  .apply {
    background-image: url(../assets/img/home/apply.png);
  }

  .race {
    background-image: url(../assets/img/home/race.png);
  }

  .show {
    background-image: url(../assets/img/home/show.png);
  }

  .stats {
    background-image: url(../assets/img/home/stats.png);
  }
}
</style>
